<template>
  <el-drawer
    title="添加 / 编辑"
    size="50%"
    :visible.sync="visible">
    <template slot="title">
      <span class="title">添加 / 编辑</span>
      <div class="btn-wrap">
        <el-button size="small" @click="close">关闭</el-button>
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </template>
    <div class="modify common-container">
      <div class="common-bot">
        <div class="modify-bot">
          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item required label="价格名称">
              <el-input v-model="form.name" placeholder="价格名称"></el-input>
            </el-form-item>
            <el-form-item required label="价格描述">
              <el-input type="textarea" v-model="form.detail" placeholder="价格描述"></el-input>
            </el-form-item>
            <el-form-item required label="价格">
              <el-input v-model="form.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item required label="会员天数">
              <el-input v-model="form.day" placeholder="会员天数"></el-input>
            </el-form-item>
            <el-form-item required label="最大购买次数">
              <el-input v-model="form.maxBuy" placeholder="最大购买次数"></el-input>
            </el-form-item>
            <el-form-item required label="到期时间">
              <el-date-picker
                v-model="form.expiredTime"
                align="right"
                type="datetime"
                default-time="23:59:59"
                placeholder="选择日期"
                value-format="timestamp">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="排序">
              <el-input type="number" v-model="form.queue"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-switch v-model="form.enable"></el-switch>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import Api from "@/api/index";

export default {
  data() {
    return {
      visible: false,
      form: {},
    };
  },
  methods: {
    show(id) {
      this.visible = true
      this.resetForm()
      if (id) this.getInfo(id)
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    resetForm() {
      this.form = {
        formId: 0,
        name: "",
        detail: "",
        price: "",
        day: 30,
        maxBuy: 1,
        queue: 1,
        expiredTime: "",
        enable: true
      };
    },
    getInfo(id) {
      Api.vipPrice.detail({
        targetId: id,
      }).then((res) => {
        this.form = res.data
        this.form.formId = res.data.id
      });
    },
    save() {
      Api.vipPrice.modify(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.close()
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.modify {
  .modify-bot {
    width: 70%;
    padding: 30px 10px;
  }
}
</style>
